<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Ubicacion Usuarios</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAdvXAW3x9mWzFu3My7JB1EBRl7lPwFGHthOmeAAsZ97l6ruTJ8xTmhLGTimZefYmJjsPqapDjgjdtIg"
            type="text/javascript"></script>

    <script type="text/javascript">
    //<![CDATA[

	var iconBlue = new GIcon(); 
    iconBlue.image = 'https://graph.facebook.com/100000059368121/picture';
    iconBlue.shadow = 'http://www.turnos.feuc.cl/shadow.png';
    iconBlue.iconSize = new GSize(50, 50);
    iconBlue.shadowSize = new GSize(75, 50);
    iconBlue.iconAnchor = new GPoint(6, 20);
    iconBlue.infoWindowAnchor = new GPoint(5, 1);

    var iconRed = new GIcon(); 
    iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
    iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    iconRed.iconSize = new GSize(12, 20);
    iconRed.shadowSize = new GSize(22, 20);
    iconRed.iconAnchor = new GPoint(6, 20);
    iconRed.infoWindowAnchor = new GPoint(5, 1);

    var customIcons = [];
    customIcons["1"] = iconBlue;
    customIcons["0"] = iconRed;

    function load() {
      
        var map = new GMap2(document.getElementById("map"));
        //map.addControl(new GLargeMapControl());
        //map.addControl(new GMapTypeControl());
        var customUI = map.getDefaultUI();
        map.setUI(customUI);
        map.setCenter(new GLatLng(-33.3340138, -70.566465), 13);

        GDownloadUrl("xmlgen.php", function(data) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("location");
          for (var i = 0; i < markers.length; i++) {
            var name = markers[i].getAttribute("name");
            var address = markers[i].getAttribute("address");
            var type = markers[i].getAttribute("type");
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
            iconBlue.image = 'https://graph.facebook.com/'+name+'/picture';
      		iconBlue.infoWindowAnchor = new GPoint(5, 1);
   		 	//iconPic.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
            var marker = createMarker(point, name, address, type);
            map.addOverlay(marker);
          }
        });
      
    }

    function createMarker(point, name, address, type) {
      var marker = new GMarker(point, customIcons[type]);
      var html = "<b>" + name + "</b> <br/>" + address;
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }

    //]]>
  </script>

  </head>

  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 800px; height: 500px"></div>
  </body>
</html>